<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<jsp:include page="${APP_PATH }/userController/toHeadIndex"></jsp:include>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>预定</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript"
	src="${APP_PATH }/static/js/jquery.min.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<style type="text/css">
</style>
<script
	src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("#train_href").removeClass('active');
		$("#plane_href").removeClass('active');
		$("#hotel_href").addClass('active');
		
		//提交订单审核 
		$("#submitBut").click(function(){
			var hotelName = $("#hotelName").text().trim();
			var startDate = $("#startDate").text().trim();
			var endDate = $("#endDate").text().trim();
			var hotelPrice = $("#hotelPrice").val().trim();
			
			var companyId = $("#companyNum").val().trim();
			var passengerPhone = $("#passengerPhone").val().trim();
			var cardType = $("#cardType").val().trim();
			var cardId = $("#cardId").val().trim();
			var linkPhone = $("#linkPhone").val().trim();
			var passengerId = $("#passengerId").val().trim();
			$.ajax({
				url:"${APP_PATH}/hotelController/submitHotelOrder",
				type:"POST",
				data:{
					"hotelName":hotelName,
					"startDate":startDate,
					"endDate":endDate,
					"orderPrice":hotelPrice,
					"companyId":companyId,
					"userId":passengerId
				},
				success: function (result) {
					if(result.code == 100){
						$("#callInfo").text("订单已提交审批").css('color','green');
						$('#myModal').modal({show: true});
						$("#endBut").click(function(){
							window.location.href="${APP_PATH }/hotelController/toHotelIndex";
						});
						
					}else{
						$("#callInfo").text("订单提交失败，请重新操作").css('color','red');
						$('#myModal').modal({show: true});
					}
					
				}
			});
			
			
		});
		
		
		//选择员工
		$("#chooseUser").click(function(){
			$("#userBody").empty();
			$("td[name=userId]").text("");
			$("td[name=companyId]").text("");
			$("td[name=userName]").text("");
			$("td[name=userPhone]").text("");
			$('#userListModal').removeData();
			$('#userListModal').modal({show: true});
		});
		
		
		//选择某个员工
		$("#userBody").delegate('a[name=chooseThis]','click',function(){
			var thisTr = $(this).closest("tr");
			var userId = $(thisTr).find('td[name=userId]').text();
			var companyId = $(thisTr).find('td[name=companyId]').text();
			var userName = $(thisTr).find('td[name=userName]').text();
			var userPhone = $(thisTr).find('td[name=userPhone]').text();
			var userCardId = $(thisTr).find('td[name=cardId]').text();
			
			$("#passengerName").val(userName);
			$("#passengerId").val(userId);
			$("#passengerPhone").val(userPhone);
			$("#companyNum").val(companyId);
			$("#linkPhone").val(userPhone);
			$("#cardId").val(userCardId);
			
			$("#companyId").val(""),
			$("#userName").val(""),
			$('#userListModal').modal('hide');
		});
		
		$("#queryUserList").click(function(){
			$.ajax({
				url:"${APP_PATH}/userController/findUserByUserNameAndCompanyId",
				type:"POST",
				data:{
					"companyId":$("#companyId").val(),
					"userName":$("#userName").val()
				},
				success: function (result) {
					$("#userBody").empty();
					var hotelList = result.extend.userList;
					var company = result.extend.company;
					$.each(hotelList,function(index,user){
						var userId = $("<td name='userId' style='display: none;'></td>").append(user.userId);
						var companyId = $("<td name='companyId' style='display: none;'></td>").append(user.companyId);
						var cardId = $("<td name='cardId' style='display: none;'></td>");
						if(user.userCard!=null){
							$(cardId).append(user.userCard.cardId);
						}
						
						var companyName = $("<td name='companyName'></td>").append(company.companyName);
						var userName = $("<td name='userName'></td>").append(user.userName);
						var userPhone = $("<td name='userPhone'></td>").append(user.userPhone);
						var chooseA = $("<a name='chooseThis' href='javascript:void(0);' style='text-decoration: none;'></a>").append("选择");
						var chooseTd = $("<td></td>").append(chooseA);
						$("<tr></tr>").append(userId)
							.append(cardId)
							.append(companyId)
							.append(companyName)
							.append(userName)
							.append(userPhone)
							.append(chooseTd)
							.appendTo("#userBody");
						
				});
				}
			});
			
			
		});
		
		//证件选择
		$("#cardType").change(function(){
			$.ajax({
				url:"${APP_PATH}/userController/findCardByUserIdAndCardtype",
				type:"POST",
				data:{
					"cardType":$(this).val(),
					"userId":$("#passengerId").val()
				},
				success: function (result) {
					var card = result.extend.userCard;
					if(card != null){
						$("#cardId").val(card.cardId);
					}else{
						alert("没有此证件，请手动添加");
					}
					
				}
			});
			
			
		});
		
	});
	
</script>
</head>
<body >

	
	<!-- 存储信息 -->
	<input type="hidden" id="hotelId" value="${hotel.hotelId }"> 
	<input type="hidden" id="hotelPrice" value="${hotel.hotelPrice }">
	
	<div class="container">
		<form class="form-inline">
			<div class="col-md-7 col-md-offset-3">
				<!-- 航班信息 -->
				<div class="row" style=" background-color: #AFEEEE;">
					<div class="row">
						<div class="col-md-3">
							<label style="font-size: 15px; color: #00BFFF;">酒店信息</label>
						</div>
					</div>
					<div class="row">
						<div class="col-md-5 col-md-offset-3">
							<div>
								<label id="cityName" style="font-size: 15px;">入住城市</label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="cityName">${hotel.cityName }</span>
							</div>
							<div>
								<label id="startTime" style="font-size:15px;">酒店名称</label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="hotelName">${hotel.hotelName } 208房间</span>
							</div>
							<div>
								<label id="startDate" style="font-size: 15px;">入住时间</label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="startDate">${startDate }</span> -- <span id="endDate">${endDate }</span>
							</div>
							<div>
								<label id="startAirportName" style="font-size: 15px;">房间价格</label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="" style="color: red;">￥${hotel.hotelPrice }</span>
							</div>
						</div>
					</div>
				</div>


				<!-- 乘客信息 -->
				<div class="row" style=" background-color: 	#B0E0E6;">
					<div class="row">
						<div class="col-md-3">
							<label style="font-size: 15px; color: #00BFFF;">旅客信息</label>
						</div>
					</div>
					<div class="row">
						<div class="col-md-7 col-md-offset-3">
							<div style="padding: 10px;">
								<label style="font-size: 15px;">入住人</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<input type="text" class="form-control" id="passengerName">
								<input type="hidden" class="form-control" id="passengerId"> 
								<a id="chooseUser" href="javascript:void(0); " style="text-decoration: none;">选择乘客</a>
							</div>
							<div style="padding: 10px;">
								<label style="font-size: 15px;">企业编号</label>&nbsp;&nbsp;
								<input type="text" class="form-control" id="companyNum">
							</div>
							<div style="padding: 10px;">
								<label style="font-size: 15px;">手机号</label>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text"
									class="form-control" id="passengerPhone">
							</div>
							<div style="padding: 10px;">
								<label style="font-size: 15px;">证件类型&nbsp;&nbsp;&nbsp;&nbsp;</label>
								<select class="form-control" id="cardType">
									<option value="0" selected="selected">身份证</option>
									<option value="1">护照</option>
									<option value="2">其他</option>
								</select>
							</div>
							<div style="padding: 10px;">
								<label style="font-size: 15px;">证件号</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<input type="text" class="form-control" id="cardId">
							</div>
							<div style="padding: 10px;">
								<label style="font-size: 15px;">联系电话&nbsp;&nbsp;</label> <input
									type="text" class="form-control" id="linkPhone">
							</div>
						</div>
					</div>
				</div>

				<!-- 联系信息 -->
				<div class="row" style=" background-color: 	#B0E0E6;">
					<div class="col-md-3 col-md-offset-9">
						<button id="submitBut" type="button"  class="btn btn-info" style="width: 150px;background-color:#B0E0E6;color:#00BFFF; ">订单确认</button>
					</div>
				</div>
			</div>
		</form>
	</div>
	

<!-- 订单提交提示信息 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">提醒信息</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label id="callInfo" style="font-size: 20px;padding-left: 200px;"></label>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button id="endBut" type="button" class="btn btn-default" data-dismiss="modal">我知道了</button>
      </div>
    </div>
  </div>
</div>

<!-- 企业员工 -->
<div class="modal fade" id="userListModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="width: 700px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <label>企业编号</label>&nbsp;&nbsp;<input type="text" id="companyId" placeholder="必填项">
        <label>员工名称关键字</label>&nbsp;&nbsp;<input type="text" id="userName">
        &nbsp;&nbsp;<button id="queryUserList" type="button" class="btn btn-primary">查询</button>
      </div>
      <div class="modal-body">
        <table class="table table-hover">
				<thead>
					<tr style="color: blue;">
						<th style="display: none;">员工ID</th>
						<th>企业名称</th>
						<th>员工名称</th>
						<th>手机号</th>
					</tr>
				</thead>
				<tbody id="userBody">
					
					
				</tbody>
			</table>
      </div>
    </div>
  </div>
</div>
</body>
</html>